<template>
  <div>
    <div class="divLogin">
      <div class="divContent">
        <div class="divLeft">
          <div class="divTitle">
            <img src="~@/assets/img/title.ef005a7a.png" alt="">
          </div>
          <!-- 表单 -->
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item prop="username">
              <div class="divUser">
                <div class="divImg">
                  <img src="~@/assets/img/phone.png" alt="">
                </div>
                <div class="divInput">
                  <el-input
                    v-model="loginForm.username"
                    placeholder="请输入内容"
                    type="text"
                  />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="divUser">
                <div class="divImg">
                  <img src="~@/assets/img/password.png" alt="">
                </div>
                <div class="divInput">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="请输入密码"
                    type="text"
                    show-password
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <!-- 记住密码框 -->
          <div class="divCheckBox">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <!-- 登录按钮 -->
          <div class="divBtnLogin">
            <el-button @click.prevent="handleLogin">立即登录</el-button>
          </div>
        </div>
        <div class="divRight" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 1.自定义校验用户名和密码输入内容是否相同
    const validateUsername = (rule, value, callback) => {
      if (value !== 'admin') {
        callback(new Error('账号错误,请重新输入'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value !== '111111') {
        callback(new Error('密码错误,请重新输入'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'admin',
        password: '111111'
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入账户' },
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' },
          { required: true, trigger: 'blur', validator: validatePassword }]
      },
      checked: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (!valid) return
        this.$router.push('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.divLogin {
  background-color: #fdfafa;
  .divContent {
    //集中
    display: flex;
    width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    background-color: #fff;
    border-radius: 40px;
  }
  .divLeft {
    //左边
    float: left;
    width: 398px;
    height: 516px;
    background: #fff;
    border-radius: 34px 0 0 34px;
    margin: 0 auto;
    .divTitle {
      margin-left: 124px;
      margin-top: 72px;
      img {
        width: 150px;
        height: 64px;
      }
    }
    .divUser {
      display: flex;
      margin-left: 59px;
      width: 280px px;
      height: 50px;
      margin-top: 30px;
    }
    .divImg {
      width: 50px;
      height: 50px;
      background: #eae7e7;
      border-radius: 8px 0 0 8px;
    }
    .divCheckBox {
      margin-left: 60px;
    }
    .divBtnLogin {
      margin-top: 23px;
      margin-left: 59px;
    }
  }
  .divRight {
    //右边
    float: right;
    background-image: url("~@/assets/img/contentBg.1321d126.png");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 560px;
    height: 516px;
  }
}
</style>
<style lang="scss">
.el-input__inner {
  background-color: #f8f5f5 !important;
  height: 50px;
  width: 230px;
  border-radius: 0 6px 6px 0;
}
.el-input__inner:focus {
  border: 1px solid #ffb200;
}

.el-checkbox {
  color: #1f2d3d;
  font-size: 14px;
}
.el-button-:focus,
.el-button:hover {
  background: #ffb200;
  border-color: #ffb200;
  color: #332929;
}
.el-button:hover {
  opacity: 0.8;
}
.el-button {
  width: 280px;
  height: 50px;
  background: #ffb200;
  border-radius: 8px;
  box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #332929;
  line-height: 22px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #ffb200;
}
.el-checkbox_inner:hover {
  border-color: #ffb200 !important;
}
.el-form-item__error {
  margin-left: 60px;
}
</style>
